<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in list.banner" :key="item.id">
				<img :src="item.image_url" alt="">
			</swiper-item>
		</swiper>
		
		<!-- <ul class='ul1'>
			<li v-for="item in list.channel" :key="item.id">
				<img :src="item.icon_url" alt="">
				<p>{{item.name}}</p>
			</li>
		</ul> -->	
		
		<listShop :data="list.channel"></listShop>
		
		<p class='pp'>品牌制造商直供</p>
		<ul class="ul2">
			<li v-for="item in list.brandList">
				<img :src="item.new_pic_url" alt="">
				<p class='p1'>{{item.name}}</p>
				<p class='p2'>￥{{item.floor_price}}起</p>
			</li>
		</ul>

	</view>
</template>

<script>
	import listShop from "../../components/list_shop/list_shop.vue"
	export default {
		components:{
			listShop
		},
		data() {
			return {
				list: []
			}
		},
		methods: {
			async add() {
				let {
					data
				} = await this.axios.get("http://shop.bufantec.com/bufan/index/index")
				this.list = data
			}
		},
		onLoad() {
			this.add()
		}
	}
</script>

<style lang='scss'>
	swiper-item {
		width: 100%;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
		}
	}

/* 	.ul1 {
		display: flex;
		justify-content: space-between;

		img {
			width: 100rpx;
			height: 100rpx;
		}

		li {
			display: flex;
			flex-direction: column;
			text-align: center;
		}
	}
 */
	.pp {
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	.ul2{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		li{
			width: 48%;
			height: 200rpx;
			position: relative;
			img{
				width: 100%;
				height: 100%;
			}
			.p1{
				position: absolute;
				top: 40rpx;
				left: 10rpx;
			}
			.p2{
				position: absolute;
				top: 90rpx;
				left: 10rpx;
			}
		}
	}
</style>
